<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>局放首页</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="../lib/font-awesome-4.7.0/css/font-awesome.min.css" media="all">
    <link rel="stylesheet" href="../css/public.css" media="all">
</head>
<style>
    .layui-top-box {padding:10px 10px 1px 10px;color:#fff}
    .panel {margin-bottom:10px;background-color:#fff;border:1px solid transparent;border-radius:3px;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.05);box-shadow:0 1px 1px rgba(0,0,0,.05)}
    .panel-body {padding:15px}
    .panel-title {margin-top:0;margin-bottom:0;font-size:14px;color:inherit}
    .label {display:inline;padding:.2em .6em .3em;font-size:75%;font-weight:700;line-height:1;color:#fff;text-align:center;white-space:nowrap;vertical-align:baseline;border-radius:.25em;margin-top: .3em;}
    .layui-red {color:red}
    .main_btn > p {height:40px;}
    .mySize{margin-top: 18px; font-size: 35px; margin-left: 10px;}
    .mySize span{
        margin-left: 78px;
    }
    .kl{

        width: 200px;
        height: 200px;
    }
    .myAD{
        position: absolute;
        top: 30px;
        left: 155px;
    }

    #online{
        font-size: 35px;
        margin-left: 15px;
        color: green;
    }

    #offline{
        font-size: 35px;
        margin-left: 15px;
        color: darkred;
    }
</style>
<body>
<div class="layuimini-container">
    <div class="layuimini-main layui-top-box">
        <div class="layui-row layui-col-space10">

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-cyan">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-blue">实时</span>
                                <h5>终端离线量</h5>
                            </div>
                            <div class="panel-content">
                                <!-- <h1 class="no-margins">1234</h1> -->
                                <div class="stat-percent font-bold text-gray mySize"><i class="fa fa-commenting"></i> <span id="off_line"></span></div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-blue">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-cyan">实时</span>
                                <h5>电池异常量</h5>
                            </div>
                            <div class="panel-content">
                                <!-- <h1 class="no-margins">1234</h1> -->
                                <div class="stat-percent font-bold text-gray mySize"><i class="fa fa-dashboard"></i> <span id="abnormalBattery"></span></div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-green">
                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-orange">实时</span>
                                <h5>异常数据量</h5>
                            </div>
                            <div class="panel-content">
                                <!-- <h1 class="no-margins">1234</h1> -->
                                <div class="stat-percent font-bold text-gray mySize"><i class="fa fa-cubes"></i> <span id="abnormalData"></span></div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="layui-col-md3">
                <div class="col-xs-6 col-md-3">
                    <div class="panel layui-bg-orange">
                        <!-- <div id="chart" style="width: 300px; height: 350px;"></div> -->

                        <div class="panel-body">
                            <div class="panel-title">
                                <span class="label pull-right layui-bg-green">实时</span>
                                <h5>终端离线率</h5>
                            </div>

                            <div class="panel-content">
                                <!-- <h1 class="no-margins">1234</h1> -->
                                <div class="stat-percent font-bold text-gray mySize">
                                    <i class="fa fa-server"></i> 
                                    <!-- <div id="chart" class="kl"></div> -->
                                </div>
                                <div class="myAD">
                                    <p>在线<span id="online"> </span> /台</p>
                                    <p>离线<span id="offline"> </span> /台</p>
                                </div>
                                <small>当前分类总记录数</small>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
 <!-- <img src="https://ae01.alicdn.com/kf/HTB1y5zVXv1H3KVjSZFH762KppXaH.png" style="width: 100%; height:3px" alt=""> -->
    <div class="layui-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <blockquote class="layui-elem-quote main_btn">
                    <h3 style="text-align: center;">曲线展示</h3>
                    <!-- <p>本模板基于layui2.5.4以及font-awesome-4.7.0进行实现。layui开发文档地址：<a class="layui-btn layui-btn-xs layui-btn-danger" target="_blank" href="http://www.layui.com/doc">layui文档</a></p>
                    <p>技术交流QQ群（561838086）：<a target="_blank" href="https://jq.qq.com/?_wv=1027&k=5JRGVfe"><img border="0" src="//pub.idqqimg.com/wpa/images/group.png" alt="layuimini" title="layuimini"></a>（加群请备注来源：如gitee、github、官网等）</p>
                    <p>喜欢此后台模板的可以给我的GitHub和Gitee加个Star支持一下</p>
                    <p>GitHub地址：
                        <iframe src="https://ghbtns.com/github-btn.html?user=zhongshaofa&repo=layuimini&type=star&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                        <iframe src="https://ghbtns.com/github-btn.html?user=zhongshaofa&repo=layuimini&type=fork&count=true" frameborder="0" scrolling="0" width="100px" height="20px"></iframe>
                    </p>
                    <p>Gitee地址：<a href="https://gitee.com/zhongshaofa/layuimini" target="_blank"><img src="https://gitee.com/zhongshaofa/layuimini/badge/star.svg?theme=dark" alt="star"></a> <a href="https://gitee.com/zhongshaofa/layuimini" target="_blank"><img src="https://gitee.com/zhongshaofa/layuimini/badge/fork.svg?theme=dark" alt="fork"></a></p> -->
                    <!-- <div id="allmap" style="width: 100%; height:auto !important; height:444px; min-height:444px ;">
                        <a id="liao" layuimini-content-href="table/add.html"></a>
                    </div> -->
                </blockquote>
                <div id="chart" style="height:500px;"></div>
            </div>

            <div class="layui-col-md3">
                <blockquote class="layui-elem-quote main_btn">
                    <h3 style="text-align: center;">表格展示</h3>
                </blockquote>
                 <!-- <div id="allmap" style="width: 100%; height:auto !important; height:444px; min-height:444px ;">
                        <a id="liao" layuimini-content-href="table/add.html"></a>
                 </div> -->
                    <table class="layui-table">
                        <thead>
                        <tr>
                            <th>昵称</th>
                            <th>加入时间</th>
                            <th>签名</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>贤心</td>
                            <td>2016-11-29</td>
                            <td>人生就像是一场修行</td>
                        </tr>
                        <tr>
                            <td>许闲心</td>
                            <td>2016-11-28</td>
                            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                        </tr>
                        <tr>
                            <td>许闲心</td>
                            <td>2016-11-28</td>
                            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                        </tr>
                        <tr>
                            <td>许闲心</td>
                            <td>2016-11-28</td>
                            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                        </tr>
                        <tr>
                            <td>贤心</td>
                            <td>2016-11-29</td>
                            <td>人生就像是一场修行</td>
                        </tr>
                        <tr>
                            <td>许闲心</td>
                            <td>2016-11-28</td>
                            <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                        </tr>
                        </tbody>
                    </table>
            </div>
            <div class="layui-col-md3">
                <blockquote class="layui-elem-quote main_btn"> <h3 style="text-align: center;">轮播展示</h3></blockquote>
                <!-- <div class="layui-carousel" id="test1">
                    <div carousel-item style="text-align: center; line-height: 18;">
                    <div>条目1</div>
                    <div>条目2</div>
                    <div>条目3</div>
                    <div>条目4</div>
                    <div>条目5</div>
                    </div>
                </div> -->
                <div id="chart2" style="width: 100%; height: 200px;"></div>
                <div id="chart3" style="width: 100%; height: 300px;"></div>

                <!-- <div class="layui-carousel" id="test2">
                    <div carousel-item style="text-align: center; line-height: 18;">
                    <div>条目1</div>
                    <div>条目2</div>
                    <div>条目3</div>
                    <div>条目4</div>
                    <div>条目5</div>
                    </div>
                </div> -->
            </div>
        </div>
    </div>

    <!-- <div class="layui-box">
        <div class="layui-row layui-col-space10">
            <div class="layui-col-md6">
                <table class="layui-table">
                    <colgroup>
                        <col width="150">
                        <col width="200">
                        <col>
                    </colgroup>
                    <thead>
                    <tr>
                        <th>昵称</th>
                        <th>加入时间</th>
                        <th>签名</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>贤心</td>
                        <td>2016-11-29</td>
                        <td>人生就像是一场修行</td>
                    </tr>
                    <tr>
                        <td>许闲心</td>
                        <td>2016-11-28</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>许闲心</td>
                        <td>2016-11-28</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    <tr>
                        <td>许闲心</td>
                        <td>2016-11-28</td>
                        <td>于千万人之中遇见你所遇见的人，于千万年之中，时间的无涯的荒野里…</td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <div class="layui-col-md6">
                <ul class="layui-timeline">
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">8月18日</h3>
                            <p>
                                layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
                                <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
                                <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">8月16日</h3>
                            <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
                            <ul>
                                <li>《登高》</li>
                                <li>《茅屋为秋风所破歌》</li>
                            </ul>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <h3 class="layui-timeline-title">8月15日</h3>
                            <p>
                                中国人民抗日战争胜利72周年
                                <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
                                <br>铭记、感恩
                                <br>所有为中华民族浴血奋战的英雄将士
                                <br>永垂不朽
                            </p>
                        </div>
                    </li>
                    <li class="layui-timeline-item">
                        <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                        <div class="layui-timeline-content layui-text">
                            <div class="layui-timeline-title">过去</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div> -->
</div>
<script src="../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<!-- <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=2COzFaICuIyVj7V3VetKfmdRVnX8BhVr"></script> -->
<script src="../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="../js/lay-module/waterBoll/countUp.js"></script>
<script src="../js/lay-module/waterBoll/echarts.js"></script>
<script src="../js/lay-module/waterBoll/echarts-liquidfill.min.js"></script>
<script src="../lib/dateTime/jquery-1.8.3.min.js"></script>
<script src="../js/index.js"></script>

<script>

layui.use('carousel', function(){
  var carousel = layui.carousel;
  //建造实例
  carousel.render({
    elem: '#test1'
    ,width: '100%' //设置容器宽度
    ,height:'250px'
    ,indicator:'none'
    // ,arrow: 'always' //始终显示箭头
    ,anim: 'fade' //切换动画方式
  });
  carousel.render({
    elem: '#test2'
    ,width: '100%' //设置容器宽度
    ,height:'250px'
    ,indicator:'none'
    ,interval:'4000'
    // ,arrow: 'always' //始终显示箭头
    ,anim: 'updown' //切换动画方式
  });

  function rgb(){
            var r=Math.floor(Math.random()*255);
            var g=Math.floor(Math.random()*255);
            var b=Math.floor(Math.random()*255);
            var rgb='rgb('+r+','+g+','+b+')';
            return rgb;
            }
            // $("#test2").children().children('div').css("background",d);
            $("#test2").children().children('div').each(function(index,ll){
                     var d = rgb();
                    $(this).css('background',d)
            })
            $("#test1").children().children('div').each(function(index,ll){
                     var d = rgb();
                    $(this).css('background',d)
            })
});


var hours = ['12a', '1a', '2a', '3a', '4a', '5a', '6a',
        '7a', '8a', '9a','10a','11a',
        '12p', '1p', '2p', '3p', '4p', '5p',
        '6p', '7p', '8p', '9p', '10p', '11p'];
var days = ['Saturday', 'Friday', 'Thursday',
        'Wednesday', 'Tuesday', 'Monday', 'Sunday'];

var data = [[0,0,5],[0,1,1],[0,2,0],[0,3,0],[0,4,0],[0,5,0],[0,6,0],[0,7,0],[0,8,0],[0,9,0],[0,10,0],[0,11,2],[0,12,4],[0,13,1],[0,14,1],[0,15,3],[0,16,4],[0,17,6],[0,18,4],[0,19,4],[0,20,3],[0,21,3],[0,22,2],[0,23,5],[1,0,7],[1,1,0],[1,2,0],[1,3,0],[1,4,0],[1,5,0],[1,6,0],[1,7,0],[1,8,0],[1,9,0],[1,10,5],[1,11,2],[1,12,2],[1,13,6],[1,14,9],[1,15,11],[1,16,6],[1,17,7],[1,18,8],[1,19,12],[1,20,5],[1,21,5],[1,22,7],[1,23,2],[2,0,1],[2,1,1],[2,2,0],[2,3,0],[2,4,0],[2,5,0],[2,6,0],[2,7,0],[2,8,0],[2,9,0],[2,10,3],[2,11,2],[2,12,1],[2,13,9],[2,14,8],[2,15,10],[2,16,6],[2,17,5],[2,18,5],[2,19,5],[2,20,7],[2,21,4],[2,22,2],[2,23,4],[3,0,7],[3,1,3],[3,2,0],[3,3,0],[3,4,0],[3,5,0],[3,6,0],[3,7,0],[3,8,1],[3,9,0],[3,10,5],[3,11,4],[3,12,7],[3,13,14],[3,14,13],[3,15,12],[3,16,9],[3,17,5],[3,18,5],[3,19,10],[3,20,6],[3,21,4],[3,22,4],[3,23,1],[4,0,1],[4,1,3],[4,2,0],[4,3,0],[4,4,0],[4,5,1],[4,6,0],[4,7,0],[4,8,0],[4,9,2],[4,10,4],[4,11,4],[4,12,2],[4,13,4],[4,14,4],[4,15,14],[4,16,12],[4,17,1],[4,18,8],[4,19,5],[4,20,3],[4,21,7],[4,22,3],[4,23,0],[5,0,2],[5,1,1],[5,2,0],[5,3,3],[5,4,0],[5,5,0],[5,6,0],[5,7,0],[5,8,2],[5,9,0],[5,10,4],[5,11,1],[5,12,5],[5,13,10],[5,14,5],[5,15,7],[5,16,11],[5,17,6],[5,18,0],[5,19,5],[5,20,3],[5,21,4],[5,22,2],[5,23,0],[6,0,1],[6,1,0],[6,2,0],[6,3,0],[6,4,0],[6,5,0],[6,6,0],[6,7,0],[6,8,0],[6,9,0],[6,10,1],[6,11,0],[6,12,2],[6,13,1],[6,14,3],[6,15,4],[6,16,0],[6,17,0],[6,18,0],[6,19,0],[6,20,1],[6,21,2],[6,22,2],[6,23,6]];

option = {
    tooltip: {
        position: 'top'
    },
    title: [],
    singleAxis: [],
    series: []
};

echarts.util.each(days, function (day, idx) {
    option.title.push({
        textBaseline: 'middle',
        top: (idx + 0.5) * 100 / 7 + '%',
        text: day
    });
    option.singleAxis.push({
        left: 150,
        type: 'category',
        boundaryGap: false,
        data: hours,
        top: (idx * 100 / 7 + 5) + '%',
        height: (100 / 7 - 10) + '%',
        axisLabel: {
            interval: 2
        }
    });
    option.series.push({
        singleAxisIndex: idx,
        coordinateSystem: 'singleAxis',
        type: 'scatter',
        data: [],
        symbolSize: function (dataItem) {
            return dataItem[1] * 4;
        }
    });
});

echarts.util.each(data, function (dataItem) {
    option.series[dataItem[0]].data.push([dataItem[1], dataItem[2]]);
});


            var chart = echarts.init(document.getElementById('chart'));
            chart.setOption(option);



    /************首页数字缓动配置******/
    var options = {
          useEasing: true, 
          useGrouping: true, 
          separator: ',', 
          decimal: '.', 
        };
    /*********************************/

    /*******************************百度地图API功能***************************************/ 
	// var map = new BMap.Map("allmap");    // 创建Map实例
	// map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
	// //添加地图类型控件
	// map.addControl(new BMap.MapTypeControl({
	// 	mapTypes:[
    //         BMAP_NORMAL_MAP,
    //         BMAP_HYBRID_MAP
    //     ]}));	  
	// map.setCurrentCity("宁德");          // 设置地图显示的城市 此项是必须设置的
    // map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放


    // var point = new BMap.Point(119.56466168174217,26.6666355952791);
	// map.centerAndZoom(point, 16);
	// var marker = new BMap.Marker(point);  // 创建标注
	// map.addOverlay(marker);               // 将标注添加到地图中 
    // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
    
    // 给marker点增加事件


    /************/

    option2 = {
    series: [{
        type: 'liquidFill',
        data: [0.5,{
                name:"数据名称",
                value:"0.4",
                direction:'left',
                itemStyle:{
                    normal:{
                        color:"red"
                    }
                }
            }, 0.3, {
                name:"数据名称",
                value:"0.2",
                direction:'left',
                itemStyle:{
                    normal:{
                        color:"gree"
                    }
                }
            }],
        shape: 'container',
        outline: {
            show: false
        }
    }]
};

option3 = {
    grid:{
                    x:38,
                    y:15,
                    x2:5,
                    y2:25,
                    borderWidth:1
    },
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line',
        smooth: true
    }]
};

option2 = {
    tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
        orient: 'vertical',
        left: 10,
        data: ['故障', '离线', '在线']
    },
    series: [
        {
            name: '访问来源',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            label: {
                show: false,
                position: 'center'
            },
            emphasis: {
                label: {
                    show: true,
                    fontSize: '30',
                    fontWeight: 'bold'
                }
            },
            labelLine: {
                show: false
            },
            data: [
                {value: 335, name: '故障'},
                {value: 310, name: '在线'},
                {value: 234, name: '离线'}
            ]
        }
    ]
};

var chart2 = echarts.init(document.getElementById('chart3'));
            chart2.setOption(option3);


var chart3 = echarts.init(document.getElementById('chart2'));
            chart3.setOption(option2);

</script>
</body>
</html>